
md-input-container {
    label {
        margin: 0;
    }
}


// General
.form-control {
    border-width: 1px;
    box-shadow: none;
}

.form-control:focus {
    border-color: $skin;
    box-shadow: none;
}

.form-group {
    .col-sm-10 {
        position: relative;
        .icon {
            position: absolute;
            right: 25px;
            top: 10px;
        }
    }

}

.input-round {
    border-radius: 25px;
}

input.input-primary {
    border-color: $skin;
    &:focus {
        border-color: $skin;
    }
}
input.input-info {
    border-color: $brand-info;
    &:focus {
        border-color: $brand-info;
    }
}
input.input-success {
    border-color: $brand-success;
    &:focus {
        border-color: $brand-success;
    }
}
input.input-warning {
    border-color: $brand-warning;
    &:focus {
        border-color: $brand-warning;
    }
}
input.input-danger {
    border-color: $brand-danger;
    &:focus {
        border-color: $brand-danger;
    }
}

// Drag and drop
.drop-box {
    width: 100%;
    height: 100px;
    padding-top: 40px;
    background: #F8F8F8;
    border: 2px dashed #DDD;
    text-align: center;
    padding-top: 35px;
    border-radius: $border-radius-base;
}


// Material 
.ui-input-group {
    position: relative; 
    margin: 18px 0 12px;

    .form-control {
        &:focus {
            border-color: $brand-primary;
        }
    }

    > input,
    > textarea {
        padding-left: 0;
        padding-right: 0;
        border: none;
        border-bottom: 1px solid $input-border;
        &:focus { outline:none; }
        &:focus ~ label,
        &:valid ~ label {
            top: -20px;
            left: 0;
            font-size: 12px;
        }
        &:valid ~ label {
            color: #999;
        }
        &:focus ~ label {
            color: $brand-primary;
        }

        // active state
        &:focus ~ .input-bar:before,
        &:focus ~ .input-bar:after {
            width: 50%;
        }
    }
    > label {
        color: $input-color-placeholder; 
        font-size: 14px;
        font-weight: normal;
        position: absolute;
        pointer-events: none;
        left: 0;
        top: 10px;
        @include transition (all .35s $material_animation);
    }

    .input-bar { 
        position: relative; 
        display: block; 
        width: 100%;
    }
    .input-bar:before,
    .input-bar:after {
        content: '';
        height: 1px; 
        width: 0;
        bottom: 1px; 
        position: absolute;
        background: $brand-primary; 
        @include transition (all .35s $material_animation);
    }
    .input-bar:before {
        left: 50%;
    }
    .input-bar:after {
        right: 50%; 
    }
}

